<template>
  <view class="page">
    <u-sticky :h5-nav-height="0">
      <view class="search">
        <u-search
          @search="getData"
          :show-action="false"
          placeholder="请输入需要搜索的品牌名称"
          v-model="brand_name"
        ></u-search>
      </view>
    </u-sticky>

    <u-index-list :scrollTop="scrollTop" :indexList="indexList">
      <view class="ul-list" v-for="(item, index) in indexList" :key="index">
        <u-index-anchor :index="item" />

        <view
          class="imgtxt"
          v-for="e of list[item]"
          :key="e.id"
          @click="handle('gotoUrl', e)"
        >
          <image :src="e.brand_logo"></image>
          <view class="text">{{ e.brand_name }}</view>
        </view>
      </view>
    </u-index-list>
  </view>
</template>

<script>
export default {
  components: {},

  data() {
    return {
      brand_name: "",
      list: null,

      scrollTop: 0,
      indexList: []
    };
  },

  //   computed: {
  //     getInfo(){
  //         return (el)=>{
  //             return
  //         }
  //     }
  //   },

  async onLoad() {
    this.getData();
  },

  methods: {
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },

    handle(type, item) {
      switch (type) {
        case "gotoUrl":
          this.$utils.toUrl(`/other/list/list?brand_id=${item.id}`);
          break;
      }
    },

    async getData() {
      let { brand_name } = this;

      let res = await this.$allrequest.goods.getBrandList(
        {
          brand_name
        },
        true
      );

      if (!res.code) {
        let list = res.data.list || {};
        this.list = list;
        let indexList = [];
        for (let i in list) {
          indexList.push(i);
        }
        this.indexList = indexList;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.page {
  height: 100vh;
}

.search {
  padding: 20rpx 24rpx;
  background: #fff;
}

::v-deep {
  .u-index-anchor {
    background: #fff;
    color: #262626;
    font-size: 30rpx;
  }
}

.imgtxt {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1px solid #f8f8f8;
  margin: 0 80rpx 0 24rpx;

  image {
    margin-right: 20rpx;
    width: 92rpx;
    height: 92rpx;
    border: 1px solid #f8f8f8;
    border-radius: 32px;
  }

  view {
    font-size: 30rpx;
    color: #262626;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
